<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <script src="js/jquery-1.11.0.js"></script>
</head>
<body>
<div>
  <br>
  <br>

  <table  align="center" width="50%">
    <tr>
      <td align="right">
        <button onclick="add()">新增</button>
      </td>
    </tr>
  </table>
  <br>
  <table border="1" align="center" width="50%" id="tab">
    <tr>
      <th>id</th>
      <th>name</th>
      <th>money</th>
      <th>操作</th>
    </tr>

<!--    <tr align="center">-->
<!--      <td>1</td>-->
<!--      <td>zs</td>-->
<!--      <td>1000</td>-->
<!--      <td><button>修改</button> &nbsp; <button>删除</button> &nbsp;<button>转账</button></td>-->
<!--    </tr>-->
<!--    <tr align="center">-->
<!--      <td>2</td>-->
<!--      <td>ls</td>-->
<!--      <td>2000</td>-->
<!--      <td><button>修改</button> &nbsp; <button>删除</button> &nbsp;<button>转账</button></td>-->
<!--    </tr>-->
  </table>
</div>

<script>
<!--  发送异步请求，查询账户信息-->
    function findAll(){
      $.ajax({
        url:"/account",
        type:"get",
        success:function (r){
          let code = r.code;
          if (code == 401){
            //没有登录 -- 去登陆页面
            location.href = "login.html"
          }else if(code == 500){
            //查询失败
            let msg = r.msg;
            alert(msg)
          }else if(code == 200){
            //查询成功(得到的是一个json数组-- [{},{},{}])
            let data = r.data;

            //将原本内容清除，并设置表格的内容为表头行
            $("#tab").html("<tr>\n" +
                    "      <th>id</th>\n" +
                    "      <th>name</th>\n" +
                    "      <th>money</th>\n" +
                    "      <th>操作</th>\n" +
                    "    </tr>");

            $.each(data,function (idx,account){
              $("#tab").append("<tr align=\"center\">\n" +
                      "      <td>"+account.id+"</td>\n" +
                      "      <td>"+account.name+"</td>\n" +
                      "      <td>"+account.money+"</td>\n" +
                      "      <td><button onclick='goUpdate("+account.id+")'>修改</button> &nbsp; <button onclick='del("+account.id+")'>删除</button> &nbsp;<button onclick='transfer(\""+account.name+"\")'>转账</button></td>\n" +
                      "    </tr>");
            })
          }
        },
        dataType:"json"
      })
    }

    findAll();

    function goUpdate (id){
      location.href = "update.html?id=" + id;
    }

    function transfer(name){
      location.href = "transfer.html?name=" + name;
    }

    function del(id){
      let b = confirm("确定删除账户吗？");
      if (b){
        $.ajax({
          url:"/account/"+id,
          type: "delete",
          success:function (r){
            let code = r.code;
            if (code == 200){
              findAll();
            }else{
              alert(r.msg)
            }
          }
        })
      }
    }

    function add(){
      location.href = "add.html";
    }

</script>

</body>
</html>